<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="../../css/mui.min.css">
<link rel="stylesheet" href="../../css/base.css">
<script src="../../script/api.js" type="text/javascript"></script>
<script src="../../script/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script src="../../script/ui.js"></script>
<style>
    body {
        background: white;
    }

    button {
        width: 100%;
        overflow: hidden;
        height: 50px;
        background-color: #FF2D4A;
        border-radius: 15px;
        color: white;
        font-size: 1rem;
    }

    #cd-key, #remarks {
        width: 100%;
        height: 3rem;
        font-size: .8rem;
        border: 1px solid #E7E7E7;
        padding-left: .5rem;
        user-select: text;
        -webkit-user-select: text;
    / / 部分浏览器已经不适用
    }

    #cd-key:focus, #remarks:focus {
        border: 1px solid red;
    }

    .panel {
        margin-left: 20px;
        margin-right: 20px;
    }
</style>
<body>
<div id='BarAppearance'></div>
<div class="base_navigation_bar base_style_color">
    <a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon"
                                                                   src="../../image/icon_jiantou.png" alt=""> </a>
    <span style="width: auto">申请加入课堂</span>
</div>
<div class="panel" style="margin-top: 20px">
    <span>课堂邀请码</span>
    <div style="margin-top: 15px">
        <input id="cd-key" type="number" placeholder="输入8位课堂邀请码"/>
    </div>
</div>
<div class="panel" style="margin-top: 20px">
    <span>备注信息</span>
    <div style="margin-top: 15px"><input id="remarks" maxlength="10" placeholder="为了便于老师审核，请务必输入您的真实信息，限制10个字符"/></div>
</div>
<div style="font-size:.8rem;margin-top:10px;margin-left:20px;color: #888888">输入课堂邀请码，可申请加入课堂，待教师审核通过后，可到学习功能中进行课程学习。
</div>
<div style="padding-left: 20px;padding-right: 20px;margin-top: 30px">
    <button onclick="submit()">提交</button>
</div>

</body>
<script>
    apiready = function () {
        initHeaderUI();
    };

    function submit() {
        var key = $('#cd-key').val().trim();
        var remark = $('#remarks').val().trim();
        if (key.length === 0) {
            api.toast({"msg": "邀请码不能为空"});
            return;
        }
        cfnetppPOST(url_plan_joinClass, {
            invitecode: key,
            remark_info: remark,
            uid: $api.getStorage('cfnetppuid')
        }, false, function (ret, err) {
            api.toast({"msg": ret.message,"global":true});
            if (ret.status) {
                api.closeWin();
            }
        })
    }

    function backClick() {
        api.closeWin();
    }
</script>